<template>
    <loading class="absolute top-1/2" v-if="showLoad"></loading>
    <div class="w-full px-6" v-else>
        <!-- 标题 -->
        <div class="flex relative">
            <img class="rounded-md w-48 h-48" :src="albumList.album.picUrl">
            <div class="bg-black absolute w-40 h-40 rounded-full left-16 -z-10 top-4"></div>
            <div class="ml-10">
                <p class="text-[var(--playBg)]">专辑</p>
                <h1 class="text-[3rem]">{{ albumList.album.name }}</h1>
                <span v-if="albumList.album.alias.length !== 0">{{ albumList.album.alias[0] }}</span>
                <p class="my-3">歌手：{{ albumList.album.artist.name }}</p>
                <p>{{ timestampToDate(albumList.album.publishTime) }}</p>
            </div>
        </div>
        <!-- 菜单栏 -->
        <div class="w-full flex items-center">
            <div class="relative">
                <i
                    class="iconfont icon-bofang before:text-[60px] text-[var(--playBg)] rounded-full hover:cursor-pointer duration-300"></i>
                <i class="iconfont icon-jiarugedan before:text-2xl text-[var(--playBg)] absolute bottom-[32%] ml-6"></i>
            </div>
            <div class="flex ml-16">
                <div
                    class="flex items-center border border-[var(--playBg)] hover:cursor-pointer hover:bg-[var(--playBg)] duration-300 hover:border-transparent hover:text-[var(--contentBg)] text-[var(--playBg)] rounded-full px-3 py-1">
                    <i class="iconfont icon-xiazai before:text-lg mr-1"></i>
                    <span class="text-sm">下载全部</span>
                </div>
            </div>

        </div>
        <!-- 导航栏 -->
        <nav class="my-6 flex">
            <ul class="flex rounded-full bg-[var(--inputBg)] justify-between">
                <li class="active conNav" @click="getNavEl($event, 0)">
                    歌曲列表</li>
                <li class="conNav" @click="getNavEl($event, 1)">
                    评论</li>
                <li class="conNav" @click="getNavEl($event, 2)">
                    专辑详情</li>
            </ul>
        </nav>
        <!-- 歌曲列表 -->
        <SongList v-show="navIndex === 0" :songList="albumList.songs" :slider="true" />
        <!-- 专辑详情 -->
        <div class="indent-8" v-show="navIndex === 2">
            <p class="mb-3 font-bold">专辑介绍</p>
            <p v-html="formattedText"> </p>
        </div>
        <!-- 专辑评论 -->
        <div v-show="navIndex === 1">
            <!-- 评论列表 -->
            <Comment :commentList="mvCommentList" :showBrilliant="showBrilliant"></Comment>
            <!-- 分页器 -->
            <div class="flex justify-center pb-5">
                <el-pagination :default-page-size="20" v-model:page-size="pageSize" @change="handleSizeChange"
                    background layout="prev, pager, next" :total="total" />
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from "vue"
import { songInfo } from '@renderer/store/modules/eveylSong/type'
import { hotAlbumsType } from '@renderer/store/modules/artistAlbum/type'
import { useRoute } from 'vue-router'
import { timestampToDate } from "@renderer/hooks"
import { MvCommentType } from "./type"
const { ipcRenderer } = require('electron')
const route = useRoute()
const navIndex = ref(0)
const total = ref(50)
const pageSize = ref(20)
const showLoad = ref(true)
const mvCommentList = ref({} as MvCommentType)
const showBrilliant = ref(true)
const singerId = ref(route.query.id as number | string)
const albumList = ref({} as albumlistType)
const formattedText = ref("");
interface albumlistType {
    album: hotAlbumsType
    songs: Array<songInfo>
    code: number
}
onMounted(() => {
    getAlbumSong(singerId.value)
})
// 切换导航
function getNavEl(e: Event, index: number) {
    let list = document.getElementsByClassName('conNav')
    let main = document.getElementById('main')
    for (let i = 0; i < list.length; i++) {
        list[i].classList.remove('active')
    }
    (e.target as HTMLElement).classList.add('active')
    navIndex.value = index
    switch (index) {
        case 0:
            getAlbumSong(singerId.value)
            break
        case 1:
            getAlbumComment(albumList.value.album.id, 0)
            break
    }
    main?.scrollTo(0, 0)
}
// 获取专辑歌曲
const getAlbumSong = async (id: number | string) => {
    await ipcRenderer.invoke("getAlbumDetail", id).then((res: albumlistType) => {
        if (res.code == 200) {
            albumList.value = res
            albumList.value.songs.forEach((item: songInfo) => {
                item.al.picUrl = res.album.picUrl
            })
            formattedText.value = albumList.value.album.description.replace(/\n/g, "<br>")
            showLoad.value = false
        }
    })
}
// 获取专辑评论
const getAlbumComment = async (id: number | string, offset: number) => {
    await ipcRenderer.invoke('getAlbumComment', id, offset).then((res: MvCommentType) => {
        mvCommentList.value = res
        if ((res.hotComments && res.hotComments.length == 0) || res.hasOwnProperty('hotComments') == false) {
            showBrilliant.value = false
        } else {
            showBrilliant.value = true
        }

    })
}
// page-size 改变时触发
const handleSizeChange = (currentPage: number) => {
    getAlbumComment(route.query.id as string | number, currentPage - 1)
    document.querySelector('#main')?.scrollTo(0, 530)
}
</script>
<style scoped lang='less'>
:deep(.el-pager li) {
    border-radius: 50px;
}

:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: var(--playBg);
}

:deep(.el-pager li:hover) {
    color: var(--playBg);
    background: var(--inputBg);
}

:deep(.el-pagination button:hover) {
    color: var(--playBg);
}
</style>